<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="http://config.com" prefix="config"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
       <base href="<%=basePath%>">
    <title><config:getConfigValue key="platformName"/>-登录</title>

    <meta name="description" content="login page"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="shortcut icon" href="<config:getConfigValue key="platformDefaultFavicon"/>" type="image/x-icon">

    <!--Basic Styles-->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link id="bootstrap-rtl-link" href="" rel="stylesheet"/>
    <link href="assets/css/font-awesome.min.css" rel="stylesheet"/>

    <!--Beyond styles-->
    <link id="beyond-link" href="assets/css/beyond.min.css" rel="stylesheet"/>
    <link href="assets/css/custom.min.css" rel="stylesheet"/>
    <link href="assets/css/animate.min.css" rel="stylesheet"/>
    <link id="skin-link" href="" rel="stylesheet" type="text/css"/>

    <!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
    <script src="assets/js/skins.min.js"></script>
    <style type="text/css">
        html {
            overflow: hidden;
        }

        body {
            min-height: auto;
        }

        body:BEFORE {
            background-color: initial;
        }

        #loginForm {
            background: url(assets/img/login_back_img/bg-white-lock.png) repeat;
            margin: 0 auto;
            margin-bottom: 0px;
            padding-bottom: 5px;
            color: #fff;
        }

        .errorInfo {
            padding-left: 41px;
        }

        .footer {
            position: fixed;
            left: 0px;
            bottom: 0px;
            text-align: center;
            width: 100%;
            height: 25px;
            background-color: #ccc;
            line-height: 25px;
        }
    </style>
</head>
<!--Head Ends-->
<!--Body-->
<body>
<div class="login-container animated fadeInDown login">
    <div class="loginbox content">
        <form action="" id="loginForm">
            <div class="loginbox-title">Administrator Login</div>
            <div class="loginbox-social">
                <div class="social-title">Please enter your account information</div>
            </div>
            <div class="loginbox-textbox">
                <input type="text" name="userName" class="form-control" placeholder="admin name"/>
            </div>
            <div class="loginbox-textbox">
                <input type="password" name="password" class="form-control" placeholder="admin password"/>
            </div>
            <div class="errorInfo">
            </div>
            <%--
            <div class="loginbox-forgot">
                <a href="">Forgot Password?</a>
            </div>
             --%>
            <div class="loginbox-submit">
                <input type="button" class="btn btn-primary btn-block" value="LOGIN" onclick="login('loginForm')">
            </div>
        </form>
    </div>
</div>
<!--Basic Scripts-->
<script src="assets/js/jquery-2.0.3.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- System commons begin -->
<script type="text/javascript">
var ctx="<%=basePath%>";
</script>
<script type="text/javascript" src="assets/js/custom/syscommons.js"></script>
<!-- System commons end -->
<script type="text/javascript" src="assets/js/jquery.backstretch.min.js"></script>
<script type="text/javascript">
    //第一个表单元素获取焦点
    $("input").first().focus();
    //回车即触发登录
    $(document).keyup(function (event) {
        if (event.which == 13) {
            login('loginForm');
        }
    });
    //登录框适中居中
    function changewindow() {
        var height = $(window).height();
        var contentHeight = $(".login .content").height();
        var loginHeight = contentHeight;
        var margintop = $(".login .content").css("marginTop");
        if (height > loginHeight) {
            $(".login .content").stop().animate({
                'marginTop': (height - loginHeight) / 2 - 17
            }, 200);
        } else {
            $(".login .content").stop().animate({
                'marginTop': 0
            }, 200);
        }
    }
    changewindow();
    $(window).resize(function () {
        setTimeout("changewindow()", 500);
    });
    //背景图片自动轮播
    $.backstretch([
        "assets/img/login_back_img/2.jpg",
        "assets/img/login_back_img/3.jpg",
        "assets/img/login_back_img/4.jpg",
        "assets/img/login_back_img/5.jpg",
        "assets/img/login_back_img/6.jpg",
        "assets/img/login_back_img/7.jpg",
        "assets/img/login_back_img/8.jpg",
        "assets/img/login_back_img/9.jpg",
        "assets/img/login_back_img/10.jpg",
        "assets/img/login_back_img/11.jpg",
    ], {
        fade: 1000,
        duration: 8000
    });
</script>
</body>
<!--Body Ends-->
</html>